// components/colorPicker/index.js
const common = require('../../utils/common.js');
Component({
  options: {
    styleIsolation: 'shared',
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    materialColorListAll: [],
    materialColorList: [],
    defaultFieldNames: {
      label: 'label', value: 'value',
    },
    search_keyword: '',
    current: 1, // 第一页
    size: 60 // 100条
  },
  ready() {
    // 组件布局完成后执行
    this.getMaterialColor();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 获取物料颜色 
    getMaterialColor() {
      common.request_api(
        "/api/pdm/commonDictionary/queryByGroupIdentification/materialColor", {},
        true,
        "get"
      ).then((res) => {
        const current = this.data.current
        const size = this.data.size
        const materialColorList = res.data.slice(0, size)
        this.setData({
          materialColorListAll: res.data,
          materialColorList: materialColorList
        });
      });
    },
    onClose() {
      this.setData({
        show: false
      });
      this.triggerEvent('close');
    },
    onChange(event) {
      const {
        picker,
        value,
        index
      } = event.detail;
      console.log(picker);
      console.log(value);
      console.log(index);
    },
    supplySelEvent(e) {
      let sel_ids = e.detail.value;
      const selectList = []
      const materialColorList = this.data.materialColorList
      for (let index = 0; index < sel_ids.length; index++) {
        let findObj = materialColorList.find(
          (v) => v.value == sel_ids[index]
        );
        if (findObj) {
          selectList.push(findObj)
        }
      }
      this.triggerEvent('handleSelect', selectList);
      this.onClose()
    },
    onClose() {
      this.setData({
        show: false,
      });
      this.triggerEvent('close');
    },
     // 下拉加载数据
    nextPage(e) {
      if (e.detail.direction !== "bottom" ||this.data.search_keyword) {
        return
      }
      wx.showLoading({
        title: '加载中',
      })
      if (this.data.materialColorListAll && this.data.materialColorList && this.data.materialColorListAll.length !== this.data.materialColorList.length) {
        const size = this.data.size
        const materialColorList = this.data.materialColorListAll.slice(this.data.materialColorList.length, size + this.data.materialColorList.length)
        let oldMaterialColorList = this.data.materialColorList
        oldMaterialColorList = oldMaterialColorList.concat(materialColorList)
        this.setData({
          materialColorList : oldMaterialColorList
        })
        wx.hideLoading()
      }
    },
    handelSearchConfirm() {
      const search_keyword = this.data.search_keyword
      if(!search_keyword) {
        this.searchClear()
        return
      }
      const materialColorListAll = this.data.materialColorListAll
      const materialColorList = materialColorListAll.filter(p => p.label && p.label.includes(search_keyword))
      this.setData({
        materialColorList: materialColorList
      });
    },
    search_keyword_change(e) {
      let {
        value
      } = e.detail;
      this.setData({
        search_keyword: value,
      });
    },
    searchClear() {
      const size = 60
      const materialColorList = this.data.materialColorListAll.slice(0, size)
      this.setData({
        search_keyword: '',
        materialColorList: materialColorList,
        size
      });
    },
  }
})